<template>
  <div class="warnInfo">
    <TitleColumn name="预警信息" />
    <div class="content">
      <vue3ScrollSeamless
        class="tableScrollWrap"
        :classOptions="{ step: 0.3 }"
        :dataList="state.list"
      >
        <ul class="list">
          <li class="listItem" v-for="(item, index) in state.list" :key="index">
            <div class="time">
              <i class="icon"></i><span>{{ item.time }}</span>
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="value">预警阈值：{{ item.value }}m</div>
            <div class="value">预警阈值：{{ item.value }}m</div>
            <div class="warning">
              <span>水位预警：</span>
              <div class="warn">水位超预警</div>
            </div>
          </li>
        </ul>
      </vue3ScrollSeamless>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import TitleColumn from "@/components/TitleColumn";
import { CountTo } from "@gui-pkg/components";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import Percentage from "./Percentage.vue";

const state = reactive({
  list: [
    { name: "土桥排涝站", time: "2024.05.31 09:20:31", value: 3.5 },
    { name: "姚顾排灌站", time: "2024.05.31 09:20:31", value: 3.5 },
    { name: "祝夏排涝站", time: "2024.05.31 09:20:31", value: 3.5 },
    { name: "新桥排灌站", time: "2024.05.31 09:20:31", value: 3.5 },
    { name: "庙东排灌站", time: "2024.05.31 09:20:31", value: 3.5 },
    { name: "郑李排灌站", time: "2024.05.31 09:20:31", value: 3.5 },
  ],
});
onMounted(() => {});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.warnInfo {
  width: 100%;
  .content {
    width: 100%;
    height: calc(100% - 24px);
    overflow: hidden;
    position: relative;
    .tableScrollWrap {
      width: 100%;
      height: 100%;
      min-height: 170px !important;
      overflow: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
    ul.list {
      width: 100%;
      height: 100%;
      padding: 0 10px 0px 10px;
      li.listItem {
        width: 630px;
        height: 40px;
        background: url(./images/list.png) no-repeat;
        background-size: 100% 100%;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        .time {
          width: 144px;
          display: flex;
          align-items: center;
          padding: 0 6px 0 0px;
          font-size: 12px;
          i.icon {
            display: inline-block;
            width: 22px;
            height: 22px;
            background: url(./images/time.png) no-repeat;
            background-size: contain;
            margin-right: 4px;
          }
        }
        .name {
          width: 90px;
          font-size: 13px;
        }
        .value {
          width: 100px;
          font-size: 13px;
        }
        .warning {
          width: 150px;
          display: flex;
          align-items: center;
          font-size: 13px;
          .warn {
            padding: 1px 8px;
            background: linear-gradient(
              90deg,
              rgba(255, 92, 0, 0.6) 0%,
              rgba(255, 48, 54, 0.6) 97.22%
            );
            border: 1px solid;
            border-image: linear-gradient(
              90deg,
              #ff3036 0%,
              rgba(255, 255, 255, 0.72) 48.62%,
              rgba(255, 48, 54, 0.96) 100%
            );
            border-image-slice: 1;
          }
        }
      }
    }
  }
}
</style>
